<template>
  <view class="table-containers">
    <slot name="title" />
    <view class="title_box flex" @click="changeVissible" v-if="!$slots.title">
      <h5 class="flex-1 title_text">
        {{ title }}
      </h5>
      <view class="oper">
        <view class="oper_text" :class="[show_table ? 'top' : '']"></view>
      </view>
    </view>
    <view class="table_flow" :style="{ height }">
      <thTable :data="state.dataList" :options="options"></thTable>
    </view>
  </view>
</template>

<script setup lang="ts">
import { request } from '@/utils/request';

const emits = defineEmits(['success']);
const props = defineProps({
  processInstanceId: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '流转详情',
  },
});
const state = reactive({
  dataList: [],
  page: 1,
  total: 0,
  isPage: false,
  api: '',
  createdGetData: false,
});
const show_table = ref(false);
const options = reactive({
  column: [
    {
      title: '当前环节',
      field: 'activityName',
      align: 'center',
      minWidth: 220,
    },
    {
      title: '处理人',
      field: 'assigneeName',
      align: 'center',
      minWidth: 200,
    },
    {
      title: '任务开始时间',
      field: 'startDate',
      align: 'center',
      minWidth: 200,
    },
    {
      title: '任务结束时间',
      field: 'endDate',
      align: 'center',
      minWidth: 200,
    },
    {
      title: '审批意见',
      field: 'comment',
      align: 'center',
      minWidth: 200,
    },
    {
      title: '任务时长',
      field: 'duration',
      align: 'center',
      minWidth: 200,
    },
  ],
});
const height = ref('0');
const getFlowDetails = () => {
  if (!props.processInstanceId) return;
  request({
    url: '/engine/history/listProcessInstanceHistory',
    method: 'GET',
    query: { processInstanceId: props.processInstanceId },
  })
    .then((res) => {
      if (res.code === 0) {
        if (res.data) {
          const taskId = res.data[res.data.length - 1]?.taskId;
          emits('success', taskId);
          getPersions(taskId);
          state.dataList = res.data;
        }
      }
    })
    .catch((err) => {
      console.log(err);
      uni.showToast({
        title: err.message || err.error || err.msg || '操作失败',
        icon: 'none',
      });
    });
};
const getPersions = (taskId: any) => {
  if (!taskId) return;
  request({
    url: `/engine/task/detail/setting/${taskId}`,
    method: 'GET',
    query: {},
  })
    .then((res) => {
      if (res.code === 0) {
        const permissions = res.data?.formPermissions;
        const _permissions = {};
        if (permissions && permissions.length) {
          for (let index = 0; index < permissions.length; index++) {
            const element = permissions[index];
            const obj = {};
            element.list.map((item: { dbFieldName: string | number }) => {
              obj[item.dbFieldName] = item;
              return item;
            });
            _permissions[element.name] = obj;
          }
          res.data._permissions = _permissions;
        }
        uni.$emit('flowPermission', res.data);
      }
    })
    .catch((err) => {
      console.log(err);
      uni.showToast({
        title: err.message || err.error || err.msg || '操作失败',
        icon: 'none',
      });
    });
};
const changeVissible = () => {
  show_table.value = !show_table.value;
  if (show_table.value) {
    height.value = '100%';
  } else {
    height.value = '0';
  }
};
const init = (val) => {
  show_table.value = val;
  if (val) {
    height.value = '100%';
  } else {
    height.value = '0';
  }
};
onMounted(() => {
  getFlowDetails();
});
defineExpose({
  getFlowDetails,
  init,
});
</script>

<style scoped lang="scss">
.table-containers {
  width: 100%;
  overflow: hidden;

  &::-webkit-scrollbar {
    display: initial;
    width: 8rpx;
    height: 10rpx;
    border-radius: 8rpx;
  }

  &::-webkit-scrollbar-thumb {
    min-height: 10rpx;
    background-color: rgb(0 0 0 / 30%);
    background-clip: padding-box;
    border-radius: 8rpx;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgb(0 0 0 / 50%);
    border-radius: 8rpx;
  }

  .flow-details {
    min-width: 800px;
  }
}

.title_box {
  align-items: center;
  padding-right: 20rpx;
  margin-bottom: 20rpx;

  .title_text {
    position: relative;
    padding-left: 30rpx;
    font-weight: 600;

    // &:after {
    //   content: '';
    //   width: 10rpx;
    //   height: 100%;
    //   position: absolute;
    //   left: 10rpx;
    //   background: #2f54eb;
    // }
  }

  .oper_text {
    width: 0;
    height: 0;
    border-top: 10rpx solid #333;
    border-right: 10rpx solid transparent;
    border-bottom: 10rpx solid transparent;
    border-left: 10rpx solid transparent;

    &.top {
      border-top: 10rpx solid transparent;
      border-bottom: 10rpx solid #333;
    }
  }
}

// .table_flow {
//   transition: all 0.2s;
// }
</style>
